<template>
  <h1>1.组件的基本写法</h1>
  fullName:{{ fullName }}
  <button @click="changeName">改变我的名字</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import { ref, computed } from "vue";
let firstName = ref("李");
let lastName = ref("四");
/* 
  
*/
let fullName = computed({
  get() {
    return firstName.value + " " + lastName.value;
  },
  set(val) {
    console.log(val,"val");
    // 修改它的名字和性通过他的下标去
    firstName.value = val.split(" ")[0];
    lastName.value = val.split(" ")[1];
  },
});

const changeName = () => {
  fullName.value = "张 三";
};
</script>

<style scoped></style>
